<template>
  <div class="mainPopupContent">
    <div class="title">
      <span>服务配置详情</span>
      <Icon type="md-close" style="float:right;cursor:pointer" @click="close" />
    </div>
    <Divider class="fengeLine" />
    <div class="mainContent">
      <div class="left">
        <div
          class="layerList"
          v-for="(item, index) in layerName"
          :key="index"
          @click="chooseLayerIndex(index)"
        >
          <span style="line-height:30px;">{{ item }}</span>
        </div>
      </div>
      <div class="right">
        <div class="serviceMsg">
          <img
            :src="imgUrl"
            style="float: left; margin-right: 10px;width:200px;height:150px"
          />
          <h3>{{ title }}</h3>
          <p>{{ desc }}</p>
        </div>
        <div style="height: 29px; margin-top: 10px;">
          <!-- <Checkbox v-model="showPopup" @on-change="changeReq"
            >是否显示弹出窗口</Checkbox
          > -->
          <Row>
            <Col span="12">
              <Checkbox v-model="showPopup">是否显示弹出窗口</Checkbox>
            </Col>
          </Row>
        </div>
        <Row style="height: 29px">
          <Col span="6">
            <span>弹出窗口标题</span>
          </Col>
          <Col span="18">
            <Input v-model="inputTitle" />
          </Col>
        </Row>
        <div class="popupContent">
          <Row
            v-for="(item, index) in fieldName"
            :key="index"
            style="margin-bottom:7px;"
          >
            <Col span="6">
              <span>{{ item }}</span>
            </Col>
            <Col span="18">
              <Input v-model="inputData[index]" />
            </Col>
          </Row>
        </div>
      </div>
    </div>
    <div class="button">
      <Button @click="submit">完成</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: "popupContent",
  data() {
    return {
      fieldName: [],
      layerName: [],
      inputData: [],
      inputTitle: "",
      requestPara: {},
      layerNum: 0,
      showPopup: false
    };
  },
  props: ["url", "title", "imgUrl", "id", "desc", "popupConfig"],
  methods: {
    getLayers() {
      if (this.popupConfig.length > 0) {
        let item1 = this.popupConfig[0];
        if (item1.hasOwnProperty("isShowPopup")) {
          this.showPopup = item1.isShowPopup;
        } else {
          this.showPopup = false;
        }
        this.inputTitle = item1.popupTitle;
        for (let i = 0; i < item1.templateConfig.length; i++) {
          this.inputData.push(item1.templateConfig[i].labelName);
          this.fieldName.push(item1.templateConfig[i].fieldName);
        }
        this.requestPara.popupConfig = [].concat(this.popupConfig);

        for (let j = 0; j < this.popupConfig.length; j++) {
          this.layerName.push(j);
        }
      } else {
        this.$.get(this.url + "?f=json").done(res => {
          this.requestPara.popupConfig = [];

          if (res.hasOwnProperty("layers")) {
            let tempAllLayer = res.layers.length;
            for (let i = 0; i < tempAllLayer; i++) {
              this.layerName.push(i);
              let tempReq = {};
              tempReq.index = i;
              tempReq.isShowPopup = this.showPopup;
              tempReq.popupTitle = "";
              tempReq.templateConfig = [];
              this.requestPara.popupConfig.push(tempReq);
            }
            this.updataLayer(0);
          } else {
            this.layerName.push(0);
            let tempReq = {};
            tempReq = {};
            tempReq.index = i;
            tempReq.isShowPopup = this.showPopup;
            tempReq.popupTitle = "";
            tempReq.templateConfig = [];
            that.requestPara.popupConfig.push(tempReq);

            this.$.get(this.url + "/0?f=json").done(res2 => {
              if (res2.hasOwnProperty("fields")) {
                for (let j = 0; j < res2.fields.length; j++) {
                  this.fieldName.push(res2.fields[j].name);
                  this.inputData.push("");

                  let tempTemplate = {};
                  tempTemplate.fieldName = res2.fields[j].name;
                  tempTemplate.labelName = "";
                  that.requestPara.popupConfig[0].templateConfig.push(
                    tempTemplate
                  );
                }
              }
            });
          }
        });
      }
    },
    submit() {
      // let result = JSON.stringify(this.requestPara);
      this.axios.post("/layer/" + this.id, this.requestPara).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("更新服务成功！");
          this.$emit("contentState", false);
        } else {
          this.$Message.info("更新失败！");
        }
      });
    },
    changeReq() {
      this.requestPara.popupConfig.forEach(item => {
        if (item.index == this.layerNum) {
          for (let i = 0; i < this.inputData.length; i++) {
            item.templateConfig[i].labelName = this.inputData[i];
          }
        }
      });
    },
    close() {
      this.$emit("contentState", false);
    },
    updataLayer(index) {
      if (this.requestPara.popupConfig[index].templateConfig.length !== 0) {
        let item1 = this.requestPara.popupConfig[index];
        if (item1.hasOwnProperty("isShowPopup")) {
          this.showPopup = item1.isShowPopup;
        } else {
          this.showPopup = false;
        }
        this.inputTitle = item1.popupTitle;
        this.inputData = [];
        this.fieldName = [];
        for (let i = 0; i < item1.templateConfig.length; i++) {
          this.inputData.push(item1.templateConfig[i].labelName);
          this.fieldName.push(item1.templateConfig[i].fieldName);
        }
      } else {
        this.requestPara.popupConfig[index].templateConfig = [];
        this.$.get(this.url + "/" + index + "?f=json").done(res2 => {
          this.fieldName = [];
          this.inputData = [];
          this.showPopup = false;
          this.inputTitle = "";
          if (res2.hasOwnProperty("fields")) {
            for (let j = 0; j < res2.fields.length; j++) {
              let tempTemplate = {};
              tempTemplate.fieldName = res2.fields[j].name;
              tempTemplate.labelName = "";
              this.requestPara.popupConfig[index].templateConfig.push(
                tempTemplate
              );

              this.fieldName.push(res2.fields[j].name);
              this.inputData.push("");
            }
          }
        });
      }
    },
    chooseLayerIndex(index) {
      this.updataLayer(index);
      this.layerNum = index;
    }
  },
  mounted() {
    this.getLayers();
  },
  watch: {
    showPopup: {
      handler() {
        this.requestPara.popupConfig.forEach(item => {
          if (item.index == this.layerNum) {
            item.isShowPopup = this.showPopup;
          }
        });
      }
    },
    inputTitle: {
      handler() {
        this.requestPara.popupConfig.forEach(item => {
          if (item.index == this.layerNum) {
            item.popupTitle = this.inputTitle;
          }
        });
      }
    },
    inputData: {
      handler() {
        this.changeReq();
      }
    }
  }
};
</script>
<style scoped>
.mainPopupContent {
  position: fixed;
  width: 820px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  z-index: 999;
}
.title {
  height: 40px;
  padding: 10px;
}
.fengeLine {
  margin: 0;
}
.mainContent {
  height: 500px;
  padding: 10px;
}
.mainContent .left {
  width: 200px;
  height: 480px;
  padding: 8px;
  float: left;
  background-color: rgba(250, 250, 250, 1);
  border-radius: 8px;
}
.mainContent .right {
  width: 600px;
  height: 480px;
  padding: 8px;
  float: right;
}
.serviceMsg {
  height: 150px;
}
.popupContent {
  height: 232px;
  padding: 8px;
  margin-bottom: 10px;
  overflow-y: auto;
}
.button {
  height: 60px;
  padding: 10px;
}
.button button {
  float: right;
}
.mainPopupContent /deep/ .ivu-input-wrapper {
  display: inline-block;
  width: 300px;
}
.layerList {
  width: 100%;
  height: 30px;
  cursor: pointer;
}
.layerList:hover {
  background-color: rgba(236, 241, 243, 1);
}
</style>
